<!-- eslint-disable vue/valid-v-for -->
<!-- eslint-disable vue/valid-template-root -->
<template>
  <el-container>
    <el-header>
      <div class="titBox">
        <p>管理平台</p>
      </div>
      <div class="logoutBox">
        <p>欢迎：<span>{{ username }}</span></p>
        <el-button type="info" @click="logOut">退出</el-button>
      </div>
    </el-header>
    <el-container>
      <el-aside :style="{ width: !this.isCollapse ? '200px' : '64px' }">
        <el-col :span="12">
          <div class="stretch" @click="stretchFun">|||</div>
          <el-menu :collapse="isCollapse" unique-opened :collapse-transition="false" :default-active="this.activeIndex"
            class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#333744" router
            text-color="#fff" active-text-color="#ffd04b">
            <el-submenu :index="String(item.id)" v-for="item in this.menulist" :key="item.id">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{ item.authName }}</span>
              </template>
              <el-menu-item-group v-for="i in item.children" :key="i.id">
                <el-menu-item :index="'/' + i.path" @click="funn(item.authName, i.authName, i.path)">
                  {{ i.path }}{{ i.authName }}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { mapGetters } from 'vuex'
import { GetMenus } from '@/api/user'
import { GetToken,SetToken } from '@/utils'
export default {
  data() {
    return {
      menulist: [],
      isCollapse: false,
      activeIndex: ''
    }
  },
  computed: {
    ...mapGetters(['username']),
    ...mapGetters(['beacklist'])
  },
  watch: {
    $route: {
      handler: function (route) {
        let path = route.path
        this.activeIndex = String(path)
        
        SetToken('redirectPath',route.path)
      },
      immediate: true
    }
  },
  created() {
    this.getMenusFn()
  },
  mounted() {

  },
  methods: {
    async logOut() {
      await this.$store.dispatch('user/loginout')
      this.$router.push('/login')
    },
    async getMenusFn() {
      try {
        let res = await GetMenus()
        if (res.meta.status == 200) {
          // console.log(res);
          this.menulist = res.data
        }
      } catch {
        console.log('menus------');
      }
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    stretchFun() {
      this.isCollapse = !this.isCollapse
    },
    funn(item, item2, activePath) {
      this.activeIndex = activePath
      let beackArr = [item, item2]
      this.$store.commit('user/SET_BREAD', beackArr)
      // console.log('-----',beacklist);
      // console.log(GetToken('Token'));
      // console.log('-----',this.$store.getters.beacklist);
    }
  }
}
</script>
<style scoped lang="scss">
#main {
  width: 100%;
  height: 100%;

}

.el-header {
  background-color: #373d41;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;

  .titBox {
    width: 215px;
    height: 40px;
    line-height: 40px;

    p {
      color: #fff;
      font-size: 24px;
      font-weight: bold;
    }
  }

  .logoutBox {
    display: flex;
    align-items: center;

    .el-button {
      background: #fff;
      color: #000;
    }

    p {
      margin: 0 20px;
      color: #fff;

    }
  }
}

.el-aside {
  background-color: #333744;
  color: #333;
  overflow: hidden;

  .el-menu {
    border: none;

  }

  .stretch {
    width: 100%;
    background-color: #4a5064;
    font-size: 13px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    letter-spacing: .2em;
    cursor: pointer;
  }

  .el-col-12 {
    width: 100%;
  }

}

.el-submenu .el-menu-item {
  text-align: center;
}

/deep/ .el-menu-item-group__title {
  padding: 0;
}

.el-container {
  height: 100%;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;


}
</style>